<template>
	<view class="cus-navbarbox">
		<view class="cus-navbar flex justify-between align-center">
			<image src="../../static/logo.png" class="cus-logo" @click="goHome"></image>
			<view class="flex align-center">
				<!-- 链接 -->
				<button class="cus-navbar-btn mr-10" @click="connect">{{address||$t('node2')}}</button>
				<button class="cus-active-btn mr-10" v-show="show_activate" @click="openActive">{{$t('activate')}}</button>
				<image src="../../static/imgs/lanuage.png" class="img-36" @click="openSheet"></image>
			</view>
		</view>
		<template v-if="navbar">
			<uni-nav-bar :title="title" :rightText="rightText" backgroundColor="#1D1E25" color="#FFFFFF" leftIcon="back" :border="false"
			@clickLeft="navBack" @clickRight="onClickRight"></uni-nav-bar>
		</template>
		
		
		<cus-dialog ref="active" :title="$t('common_1')" :btnTxt="$t('common_2')" @confrim="confrim">
			<!-- <view class="color-59 size-28">官方钱包地址</view>
			<view class="word-warp dialog-cell size-26 mt-20">{{activeData.activate_address}}</view> -->
			<view class="flex justify-between align-center mt-30">
				<view class="color-59 size-28">{{$t('common_3')}}</view>
				<view class="size-20 flex align-center">
					<text class="color-59">{{$t('common_4')}}？</text>
					<navigator url="/pages/wallet/recharge">
						<text class="color-main">{{$t('common_5')}}</text>
					</navigator>
				</view>
			</view>
			<view class="dialog-cell flex justify-between align-center mt-20">
				<view class="">
					<text class="size-32">{{activeData.activate_price}}</text>
					<text class="size-24 color-59 ml-10">≈{{activeData.activate_price_u}}USDT</text>
				</view>
				<view class="flex-shrink ml-30 size-26">AFH</view>
			</view>
		</cus-dialog>
	</view>

</template>

<script>
	import { setLocale, removeAddress, removeToken, removeActive } from '@/config/storage.js'
	export default {
		name: "cusNavbar",
		props:{
			navbar:{
				type:Boolean,
				default:false
			},
			title:{
				type:String,
				default:''
			},
			rightText:{
				type:String,
				default:''
			},
			url:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				amount:'',
				activeData:{}
			}
		},
		computed: {
			locales() {
				return [{
					text: this.$t('locale.en'),
					code: 'en'
				},
				{
					text: this.$t('locale.zh-hans'),
					code: 'zh-Hans'
				}]
			},
			language() {
				let language = this.$store.state.language.language
				for (let item of this.locales) {
					if(item.code === language)return item.text
				}
			},
			address(){
				let address = this.$store.state.user.address
				if(address){
					return address.slice(0, 6) + '****' + address.slice(address.length-4)
				}
			},
			show_activate(){
				let activate = this.$store.state.user.isActive
				return activate != 1
			}
		},
		methods: {
			openSheet() {
				uni.showActionSheet({
					itemList: [this.$t('locale.en'), this.$t('locale.zh-hans')],
					success: res => {
						let index = res.tapIndex
						let code = this.locales[index].code
						if(code===this.language)return
						else{
							this.$store.commit('language/setLanguage', code)
							setLocale(code)
							this.$i18n.locale = code
						}
					}
				});
			},
			openActive(){
				this.$api.post('/data/api.auth.invest/activateInfo').then(res=>{
					this.activeData = res
					this.$refs.active.open()
				})
			},
			confrim(){
				this.$api.post('/data/api.auth.invest/activate').then(res=>{
					uni.showToast({
						title:this.$t('common_6')
					})
					this.$store.commit('user/setMineData', {
						is_activate: 1
					})
					this.$refs.active.close()
				})
			},
			connect(){
				removeAddress()
				removeToken()
				removeActive()
				uni.reLaunch({
					url:"/pages/index"
				})
			},
			goHome(){
				uni.reLaunch({
					url:"/pages/tabbar/home"
				})
			},
			navBack(){
				let pages = getCurrentPages()
				if(pages.length>1)uni.navigateBack()
				else uni.reLaunch({
					url: "/pages/tabbar/home"
				})
			},
			onClickRight(){
				uni.navigateTo({
					url:this.url
				})
			}
		}
	}
</script>

<style lang="scss">
	.cus-navbarbox {
		background-color: #0B0C15;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;

		.cus-navbar {
			width: 100vw;
			height: 112rpx;
			padding: 0 40rpx;
			position: relative;
			z-index: 1;
			
			.cus-logo{
				width: 200rpx;
				height: 54rpx;
			}

			.cus-navbar-btn {
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 35rpx;
				text-align: center;
				border-radius: 22rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				background-color: rgba(255, 255, 255, 0.2);
			}
			
			.cus-active-btn{
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 15rpx;
				text-align: center;
				border-radius: 22rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				background-color: rgba(67, 235, 149, 0.1);
				color: #01FF9A;
			}
		}
	}
	.dialog-cell{
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #14151C;
		.dialog-place{
			color: #595960;
		}
	}
</style>